<div class="col-lg-12">
  <section class="panel">
    <header class="panel-heading">
      Static Table
      <a class="pull-right" href="/device/addTaskView"><i class="icon-plus"></i></a>
    </header>
    <div class="row text-small">
      <div class="col-lg-4 m-b-mini">
        <select class="input-small inline form-control" style="width:130px">
          <option value="0">Bulk action</option>
          <option value="1">Delete selected</option>
          <option value="2">Bulk edit</option>
          <option value="3">Export</option>
        </select>
        <button class="btn btn-small btn-white">Apply</button>                
      </div>
      <div class="col-lg-4 m-b-mini">
        <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-small btn-white active">
            <input type="radio" name="options" id="option1"> Day
          </label>
          <label class="btn btn-small btn-white">
            <input type="radio" name="options" id="option2"> Week
          </label>
          <label class="btn btn-small btn-white">
            <input type="radio" name="options" id="option2"> Month
          </label>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="input-group">
          <input type="text" class="input-small form-control" placeholder="Search">
          <span class="input-group-btn">
            <button class="btn btn-small btn-white" type="button">Go!</button>
          </span>
        </div>
      </div>
    </div>
    <div class="pull-out m-t-small">
      <table class="table table-striped b-t text-small">
        <thead>
          <tr>
            <th width="20"><input type="checkbox"></th>
            <th class="th-sortable" data-toggle="class">taskID
              <span class="th-sort">
                <i class="icon-sort-down text"></i>
                <i class="icon-sort-up text-active"></i>
                <i class="icon-sort"></i>
              </span>
            </th>
            <th>Task wind</th>
            <th>Task water</th>
            <th>Task light</th>
            <th>Date</th>
            <th>DeviceID</th>
            <th width="30"></th>
          </tr>
        </thead>
        <tbody>
          {% for task in tasks %}
            <tr>
              <td><input type="checkbox" name="post[]" value="2"></td>
              <td>{{task.task_id}}</td>
              <td>{{task.wind_act}}</td>
              <td>{{task.water_act}}</td>
              <td>{{task.light_act}}</td>
              <td>{{task.act_time}}</td>
              <td>{{task.task_to_device_id}}</td>
              <td>
                <a href="#" class="active" data-toggle="class">
                  <i class="icon-ok icon-large text-success text-active"></i>
                  <i class="icon-remove icon-large text-danger text"></i>
                </a>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <footer class="panel-footer">
      <div class="row">
        <div class="col-lg-4 hidden-sm">
          <select class="input-small inline form-control" style="width:130px">
            <option value="0">Bulk action</option>
            <option value="1">Delete selected</option>
            <option value="2">Bulk edit</option>
            <option value="3">Export</option>
          </select>
          <button class="btn btn-small btn-white">Apply</button>                  
        </div>
        <div class="col-lg-4 text-center">
          <small class="text-muted inline m-t-small m-b-small">showing 20-30 of 50 items</small>
        </div>
        <div class="col-lg-4 text-right text-center-sm">                
          <ul class="pagination pagination-small m-t-none m-b-none">
            <li><a href="#"><i class="icon-chevron-left"></i></a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#"><i class="icon-chevron-right"></i></a></li>
          </ul>
        </div>
      </div>
    </footer>
  </section>
</div>